<template>
  <div>
    <div id="head">
      <p id="title">SMS系统</p>
      <div id="loginInfo" v-if="userName !== ''" class="mr-4" @click.stop>
        <el-popover v-model="visible">
          <p @click="dropOut()" id="dropout">退出</p>
          <p @click="dialogTableVisible = true" id="modifyword">修改密码</p>
          <p id="username" slot="reference">
            <i class="el-icon-user-solid"></i>
            {{ userName }}
          </p>
        </el-popover>
      </div>
      <el-dialog
        title="确认密码"
        :visible.sync="dialogTableVisible"
        center
        width="30%"
      >
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="原密码" prop="oldword">
            <el-input
              type="password"
              v-model="ruleForm.oldword"
              auto-complete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newword">
            <el-input
              type="password"
              v-model="ruleForm.newword"
              auto-complete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmword">
            <el-input
              type="password"
              v-model="ruleForm.confirmword"
              auto-complete="off"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </span>
      </el-dialog>
    </div>
    <el-container>
      <el-menu class="el-menu-vertical-demo" :collapse="isCollapse"  @select="handleSelect" router>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-folder"></i>
            <span slot="title">超市商品</span>
          </template>
          <el-menu-item index="product">商品</el-menu-item>
          <el-menu-item index="1-2">商品类型</el-menu-item>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">超市订单</span>
        </el-menu-item>
        <el-menu-item index="accountInfo">
          <i class="el-icon-menu"></i>
          <span slot="title">用户信息</span>
        </el-menu-item>
      </el-menu>
      <el-container>
        <router-view class="main-container" />
      </el-container>
    </el-container>
    <div id="foot">
      <p>© 2025 SMS 系统 Inc 1.0.0.1</p>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Entry",
  data() {
    var validateoldword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else if (value !== this.oldPassword) {
        callback(new Error("密码输入错误"));
      } else {
        callback();
      }
    };
    var validatenewword = (rule, value, callback) => {
      var passReg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$");
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (value.length < 6 || value.length > 20) {
        callback(new Error("密码的长度为6-20位"));
      } else if (!passReg.test(value)) {
        callback(
          new Error("密码不能是纯数字和纯字母,不能有特殊字符（空格也算）")
        );
      } else if (value === this.oldPassword) {
        callback(new Error("新密码与原密码重复"));
      } else {
        callback();
      }
    };
    var validateconfirmword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newword) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      isCollapse: false,
      userName: "",
      visible: false,
      dialogTableVisible: false,
      ruleForm: {
        oldword: "",
        newword: "",
        confirmword: "",
      },
      oldPassword: "",
      rules: {
        oldword: [{ validator: validateoldword, trigger: "blur" }],
        newword: [{ validator: validatenewword, trigger: "blur" }],
        confirmword: [{ validator: validateconfirmword, trigger: "blur" }],
      },
    };
  },
  mounted() {
    let userMessage = JSON.parse(sessionStorage.getItem("userMessage"));
    let oldPassword = JSON.parse(sessionStorage.getItem("oldPassword"));
    // 当前用户密码
    this.userName = userMessage.name;
    this.oldPassword = oldPassword;
    let permissionBits = JSON.parse(sessionStorage.getItem("permissionBits"));
    //依据用户权限添加对应菜单栏。。。
  },
  methods: {
    ...mapActions(["deletLogin","putPassword"]),
    async dropOut() {
      let userMessage = JSON.parse(sessionStorage.getItem("userMessage"));
      this.$store.commit({
        type: "islogin",
        flag: false,
      });
      await this.deletLogin({ accountId: userMessage.id });
      window.sessionStorage.setItem("islogin", false);
      this.$router.push("/");
    },
    submitForm(formName) {
      let userMessage = JSON.parse(sessionStorage.getItem("userMessage"));
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogTableVisible = false;
          await this.putPassword({
            accountId: userMessage.id,
            password: { password: this.ruleForm.newword },
          });
          this.$message({
            message: "恭喜，密码修改成功,重新登录",
            type: "success",
          });
          this.dropOut();
        }else {
          this.$message({
            message: "抱歉，密码修改失败",
            type: "warning",
          });
        }
      });
    },
    handleSelect(index, indexPath) {
      //test 这个功能不用
       console.log("test handleSelect")
      //  console.log(index)
      // 跳转至登录页
      // this.$router.push({ name: "login" });
      // switch(index){
      //   case '1-1':
      //     this.$router.push({ name: "product" });
      //     break;
      //   case '1-2':
      //   case '2':
      //   case '3':
      //     this.$router.push({ name: "accountInfo" });
      //     break;
      //   default:
      //     break;
      // }
    }
  },
};
</script>

<style scoped>
#head {
  height: 50px;
  overflow: hidden;
  border-bottom: 1px solid rgb(129, 123, 123);
}
#head #title {
    float: left;
    color: rgb(46, 75, 241);
    font-size: 24px;
    line-height: 50px;
    margin-left: 15px;
    font-weight: bold;
}
#loginInfo{
  line-height: 50px;
  float: right;
}
.el-menu {
  text-align: left;
}
.el-menu-item {
  min-width: 155px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 400px;
  max-height: max-content;
}
.el-container {
  padding-bottom: 30px;
}
.main-container {
  width: 1100px;
  margin: 0 auto;
}
@media screen and (min-width: 1400px) {
  .main-container {
    min-width: 1100px;
    width: 90%;
  }
}

#foot {
  position: absolute;
  width: 100%;
  height: 30px;
  bottom: 0px;
  background-color: #e4e7ec;
  overflow: hidden;
}
#foot p{
  line-height: 30px;
    font-size: 10px;
    float: right;
    margin-right: 10px;
}
</style>
